<template>
    <!--微信组件-->
  <div id="wechat">
    <ul class="wechat-list" v-show="displayType !== 1">
        <msg-item v-for="baseMsgObj in filteredMsgList" :item="baseMsgObj" class="list-row line-bottom" :key="baseMsgObj.mid"></msg-item>
    </ul>

    <ul class="wechat-list" v-show="displayType !== 0">
      <li v-for="item in filteredMsgListPlus" :key="item.msg_id" class="list-row" style="height: auto">
        <div class="list-info">
          <div class="header-box">
            <div class="header">
              <img :src="getImageSrc(item.group_name)">
            </div>
          </div>
          <div class="desc-box">
            <div class="desc-time">{{fmtDate(item.date) }}</div>
            <div class="desc-author">{{item.group_name}}</div>
            <div class="desc-msg-history" v-html="highlightText(item.content, searchIpt)"></div>
          </div>
          </div>
      </li>
    </ul>

  </div>
</template>
<script>
    import msgItem from "../wechat/msg-item"
    import { mapState } from 'vuex';
    export default {
        components: {
            msgItem
        },
        mixins: [window.mixin],
        data() {
            return {
                "pageName": "大V看盘"
            }
        },
      methods: {
        highlightText(text, search) {
          if (!search) {
            return text; // 如果没有搜索词，则返回原文本
          }
          // 使用正则表达式替换匹配的文本
          const highlighted = text.replace(new RegExp(search, 'gi'), (match) => {
            return `<span class="highlight">${match}</span>`;
          });
          return highlighted;
        },
        // 格式化时间
        fmtDate(latestMessageTime) {
          const messageDate = new Date(latestMessageTime);
          const now = new Date();

          // 检查年、月、日是否相同
          if (messageDate.getFullYear() === now.getFullYear() &&
              messageDate.getMonth() === now.getMonth() &&
              messageDate.getDate() === now.getDate()) {
            // 如果是当天，返回小时和分钟，左补0
            let hours = messageDate.getHours().toString().padStart(2, '0');
            let minutes = messageDate.getMinutes().toString().padStart(2, '0');
            return `${hours}:${minutes}`;
          } else {
            // 如果不是当天，返回月份和日期，月份和日期左补0
            let month = (messageDate.getMonth() + 1).toString().padStart(2, '0');
            let day = messageDate.getDate().toString().padStart(2, '0');
            return `${month}月${day}日`;
          }
        }
        ,
        getImageSrc(groupName) {
          return `images/header/${groupName}.png`;
        },
      },
      computed: {
        ...mapState({
          displayType: state => state.displayType,
          searchIpt: state => state.searchIpt,
          // 其他计算属性
        }),
        filteredMsgListPlus() {
          const msgList = this.$store.state.msgList.baseMsg;
          const searchIpt = this.$store.state.searchIpt;
          if (searchIpt.length < 2) {
            return [];
          }

          const now = new Date(); // 当前日期和时间
          const twoDaysAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2); // 两天前的日期

// 遍历 msgList
          let items = []; // 初始化一个空数组用于存放结果
          msgList.forEach(group => {
            if (group.group_name === "消息事件驱动") {
              return; // 相当于在 forEach 循环中的 continue
            }
            group.msg.forEach(msg => {
              if (msg.text.includes(searchIpt) && msg.date > twoDaysAgo) {
                // 如果 text 包含 "打板"，则创建一个新的 item 对象
                let item = {
                  msg_id:msg.msg_id,
                  content: msg.text,
                  date: msg.date,
                  mid: group.mid,
                  group_name: group.group_name
                };
                items.push(item); // 将 item 添加到结果数组中
              }
            });
          });
          // console.log(items)
          items.sort((a, b) => {
            // 将 date 字符串转换为 Date 对象
            let dateA = new Date(a.date);
            let dateB = new Date(b.date);
            return dateB - dateA; // 从新到旧排序
          });
          return items;
        },

        filteredMsgList() {
          // 获取 Vuex store 中的 searchIpt 值
          //const searchIpt = this.$store.state.searchIpt;
          const searchIpt = ""
          // 过滤 baseMsg 数组
          return this.$store.state.msgList.baseMsg.filter(baseMsgObj => {
            // 这里是过滤逻辑，例如检查消息内容或其他属性是否包含 searchIpt
            return baseMsgObj.group_name.includes(searchIpt);
          });
        }
      }

    }
</script>
<style lang="less">
    @import "../../assets/less/wechat.less";
</style>